<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
      *{
         margin:0;
         padding:0;
      }
      .box{
         width:300px;
         height:300px;
         border:1px solid orange;
         position: relative;
         margin:auto;
         top:150px;
         border-radius: 100%;
      }
      .box .box1{
         width:30px;
         height:30px;
         background:skyblue;
         position: absolute;
         border-radius:100% ;
      }
   </style>
</head>
<body>
   <div class="box">
      <div class="box1"></div>
   </div>
   <script>
   //     圆周运动
   //  +    Math.cos(弧度)
   //  +    余弦(cos)：邻边比斜边 cosA = b / 半径   b = 半径 * cos(弧度)
   //  +    Math.sin(弧度)
   //  +    正弦(sin)：对边比斜边 sinA = a / 半径   a = 半径 * sin(弧度)               
   //  +    弧度 = (角度 * Math.PI) / 180° 

      // 无论小球在圈上哪个位置，因为弧度的不同，a和b有可能为负值
      // left:r(半径)+a(对边)，top:r(半径)+b(邻边)
      // 先获取已有的元素
      var box = document.querySelector('.box');
      var box1 = document.querySelector('.box1');
      // 获取两个圆的半径
      let boxR = box.offsetWidth/2;
      let box1R = box1.offsetWidth/2;
      // 需要用到定时器，和移动函数
      // 因为小圆在大圆上活动，位置为 left:r(半径)+a(对边)，top:r(半径)+b(邻边)
      // 先设弧度为0;
      let deg = 0;
      // 先用函数求出小球移动的轨迹
      function funder(){
         // 求出弧度
         let hudu = (deg * Math.PI)/180;
         // 求出邻边和对边
         let a = Math.sin(hudu) * boxR;
         let b = Math.cos(hudu) * boxR;

         box1.style.left = boxR + a - box1R + 'px';
         box1.style.top = boxR + b - box1R + 'px';
      }
      setInterval(() =>{
         deg += 10;
         funder()
      },50)
   </script>
</body>
</html>